<template>
	<view>
		<u-popup :show="show" @close="show=false" :closeable="true" round="32rpx">
			<view class="popup">
				<view class="text-center u-font-32" style="color: #181919;">保价</view>
				<view class="flex align-center u-m-t-32">
					<view class="u-m-r-20 text999">声明价值</view>
					<view class="flex align-center u-p-l-32 u-p-r-32 u-p-t-10 u-p-b-10 input">
						<u-input v-model="form.price" placeholder="请输入保价" border="none"></u-input>
						<text class="text999">元</text>
					</view>
				</view>
				<view class="flex flex-direction align-end u-m-t-20 u-p-b-36" style="border-bottom: 1px solid #eee;">
					<view class="flex align-center">
						<view class="label">保费</view>
						<view class="val " style="color: #ED4B48;">
							<text class="u-font-24">￥</text>
							<text>{{insured}}</text>
						</view>
					</view>
					<view class="flex align-center u-m-t-16">
						<view class="label text999">费率</view>
						<view class="val text999">3%</view>
					</view>
				</view>
				<view class="u-m-t-36 text-black">保价说明：</view>
				<view class="u-m-t-28 u-m-b-16 text999">1、洗护物品 (衣物、鞋靴)购买价格超过2000元的建议选择保价服务;</view>
				<view class="u-m-t-28 u-m-b-16 text999">2、请按照洗护物品(衣物、鞋靴)实际购买价格填写声明价值，申请赔偿时请提供购衣发票或购买凭证;</view>
				<view class="u-m-t-28 u-m-b-16 text999">3、保价费率为3%，即: 保价费用=客户声明价值*3%</view>
				<view class="u-m-t-28 u-m-b-16 text999">4、对实行保价的洗护物品 (衣物、鞋靴)造成损坏、丢失的，或者清洗后直接影响物品原有形态(质量)
					而无法恢复的，将根据声明价值和购买发票二者较低者予以赔偿;赔偿后洗护物品(衣物、鞋靴) 归我司所有，如需索要，按以上金额的70%进行赔偿;</view>
				<view class="u-m-t-28 text999">5、如洗涤后洗护物品 (衣物、鞋靴)出现质量问题，经过修补仍有穿着价值的，按以上金额的25%赔偿。</view>
				<view class="u-m-t-40">
					<u-button @click="comfirm" color="#81D8CF">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					price: '', //
					rate: 0.03, //费率
					insuredPrice: 0, //保价
				}
			}
		},
		computed: {
			insured() {
				let price = parseFloat(this.form.price);
				let rate = parseFloat(this.form.rate);
				let insuredPrice = (price * rate) | this.xToFixed;
				return insuredPrice;
			}
		},
		methods: {
			comfirm() {
				this.form.insuredPrice = this.insured;
				this.$emit('getForm', this.form);
				this.show = false;
			}
		}
	}
</script>

<style>
	.popup {
		padding: 20rpx 32rpx;
	}

	.input {
		width: 80%;
		background: #F7F9FC;
		border-radius: 4rpx;
	}

	.label {
		width: 100rpx;
	}

	.val {
		width: 100rpx;
		text-align: right;
	}
</style>